<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 客户名称：
          Input(v-model="name" placeholder="请输入" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 客户所属：
          .choose-saler
            Tooltip(placement="bottom" max-width="200" :disabled="!tipIsShow" theme="light")
              Input.input(v-model="dolderNames" type="text" readonly clearable @on-clear="salersClear")
              div(slot="content")
                .font-14 {{dolderNames}}
            .button(@click="chooseSaler") 选择
          //- Input(v-model="salerName" search enter-button="选择" placeholder="请输入" clearable @on-search="chooseSaler")
          //- Button(type="info" @click="chooseSaler") 选择
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 拾取状态：
          Select(v-model="pickupType"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in pickupTypeArr" :value="item.value" :key="index") {{ item.label }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 企业性质：
          Select(v-model="character"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in characterArr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 企业规模：
          Select(v-model="size"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in sizeArr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 所属行业：
          Select(v-model="businessType"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in customerBusinesstype_arr" :value="item.key" :key="index") {{ item.value }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 客户来源：
          Select(v-model="sourceId"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in customerSourceArr" :value="item.value" :key="index") {{ item.text }}
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 注册资本：
          Input.unit-input(v-model="registerCapital")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 流入公海时间：
          DatePicker(:value="liurushijian" type="daterange" placement="bottom" placeholder="请选择日期范围" separator="至" @on-change="timeChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w100 客户类型：
          Select(v-model="signedType"  placeholder="请选择" clearable)
            Option(v-for="(item, index) in customersignedtype" :value="item.key" :key="index") {{ item.value }}
          Button.ml-15(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="setThead" :data="listData" @on-selection-change="tableSelectChange")
        div(slot="header")
          .pull-left.table-title-lefttxt
            span.leftText
              | 公海客户数:
              span.text-info.pl-5.pr-5.font-weight {{codeTotal}}
              | 家
          .pull-right.table-title-btns
            Button.mr-15(type="info" @click="createBtn") 新建客户
            Button.mr-15(type="info" @click="importBtn") 客户导入
            Button.mr-15(type="info" @click="exportBtn") 客户导出
            //- Button.mr-15(type="info" size="small" @click="") 批量拾取
        template(slot-scope="{ row, index }" slot="name")
          span {{row.name}}
          //- span(v-if="row.holders") {{row.name}}
          //- .u-d-info(v-else @click="gotoDetail(row.id)") {{row.name}}
        //- template(slot-scope="{ row, index }" slot="contact")
        //-   Button(size="small" type="info" @click="") 查看
        template(slot-scope="{ row, index }" slot="communicate")
          Button.mr-5(type="info" size="small" @click="addCommunication(row.id)") 添加
          Button(type="info" size="small" @click="checkCommunication(row.id)") 查看
        template(slot-scope="{ row, index }" slot="action_2")
          Button.mr-5(v-if="hasHRDC_SetPrivate" type="text" size="small" @click="setPrivate(row.id)") 拾取
          //- v-if="hasHRDC_SetDistribute" 
          Button.mr-5(v-if="hasHRDC_SetDistribute" type="text" size="small" @click="handleShowAllocationModal(row)") 分配
          Button.mr-5(v-if="hasDelete" type="text" size="small" @click="isSureModal(row.id)") 删除
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")
    createCustomer(ref="createCostomer" :customerBusinesstype_arr="customerBusinesstype_arr" :sizeArr="sizeArr" :characterArr="characterArr" :customerSourceArr="customerSourceArr" @get-list="getList")
    AllocationModal(ref="AllocationModal" @query="getList")
    createCommunication(ref="createCommunication" :customerId="customerId" :contact_arr="contact_arr" :communicationtype="communicationtype")
    checkCommunication(ref="checkCommunication" :customerId="customerId" :communicationList="communicationList" :communicationTotal="communicationTotal" @get-list="getCommunicationList")
    importModal(ref="importModal" @get-list="getList")
    visibvleTreeList(ref="treeModal" :treeData="treeData" @on-change="getSalerId")
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'
import dataApi from '@/api/data.js'
import Mixin from '../coustomerMixin.js'
import createCustomer from './modal/create.vue'
import AllocationModal from './modal/allocation.vue'
import createCommunication from '../../HRDC-common/communication/create.vue'
import checkCommunication from '../../HRDC-common/communication/check.vue'
import importModal from './modal/import.vue'
import { Common } from '@/utils/common.js'
export default {
  name: 'h-c-public',
  components: {
    createCustomer,
    createCommunication,
    checkCommunication,
    importModal,
    AllocationModal
  },
  data () {
    return {
      thead: ['selection', 'source', 'signedTypeName', 'name', 'characterName', 'businessTypeName', 'registerCapital', 'size', 'holders','createrName', 'createTime', 'throwTime', 'communicate', 'action_2'],
      listData: [],
      name: '', // 客户名称
      salerName: '', // 销售名称
      pickupType: 0, // 是否可拾取--0所有,1拾取，2未拾取
      pickupTypeArr: [{label: '所有', value: 0}, {label: '已拾取', value: 1}, {label: '未拾取', value: 2}],
      character: '', // 企业性质
      size: '', // 企业规模
      businessType: '', // 所属行业
      sourceId: '', // 客户来源
      registerCapital: '', // 注册资本
      liurushijian: [], // 流入公海时间
      signedType: '', // 客户类型
      ids: [],
      loading: false,
      codeTotal: 0,
      notHeldCount: 0,
      PageIndex: 1,
      PageSize: 10,
      // arrListDown: {
      //   customersignedtype: []
      // }
      customersignedtype: []
    }
  },
  mixins: [Mixin],
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasHRDC_PublicCustomers () {
      return this.actionArr.indexOf('HRDC_PublicCustomers') > -1
    },
    // 拾取
    hasHRDC_SetPrivate () {
      return this.actionArr.indexOf('HRDC_SetPrivate') > -1
    },
    // 分配
    hasHRDC_SetDistribute () {
      return this.actionArr.indexOf('HRDC_SetDistribute') > -1
    },
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    },
    // 客户导入
    hasHRDC_ImportCustomers () {
      return this.actionArr.indexOf('HRDC_ImportCustomers') > -1
    },
    // 客户导出
    hasHRDC_ExportCustomers () {
      return this.actionArr.indexOf('HRDC_ExportCustomers') > -1
    },

    setThead () {
      return this.getTableColumns(this.thead)
    }
  },
  created () {
    this.getEnum()
    this.getList()
  },
  watch: {
    $route (to, from) {
      if (to.name === 'h-c-public') {
        this.getList()
      }
    }
  },
  methods: {
    // 数据字典
    // getEnum () {
    //   let groupName = 'sales.customersignedtype'
    //   Common.getEnum(groupName, this.arrListDown)
    // },

    // 获取客户列表
    getList () {
      this.loading = true
      HRDCCustomerApi.GetPublicCustomers({
        name: this.name,
        salerName: this.salerName,
        HolderIds: this.salesIds,
        pickupType: this.pickupType,
        Character: this.character,
        Size: this.size,
        SourceId: this.sourceId,
        BusinessType: this.businessType,
        RegisterCapital: this.registerCapital,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        ThrowBeginTime: this.liurushijian && this.liurushijian[0],
        ThrowEndTime: this.liurushijian && this.liurushijian[1],
        SignedType: this.signedType
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
          this.notHeldCount = res.data.extraInfo.notHeldCount
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 新建客户
    createBtn () {
      this.$refs.createCostomer.creatOpen()
    },
    // 拾取客户
    setPrivate (id) {
      HRDCCustomerApi.Pickup({
        ids: [id],
        type: 1 // 1拾取，2分配
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList()
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 查询
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },
    // 客户导入
    importBtn () {
      this.$refs.importModal.show()
    },
    // 客户导出
    exportBtn () {
      HRDCCustomerApi.ExportCustomers({
        selectedIds: this.ids,
        name: this.name,
        salerName: this.salerName,
        HolderIds: this.salesIds,
        pickupType: this.pickupType,
        Character: this.character,
        Size: this.size,
        SourceId: this.sourceId,
        BusinessType: this.businessType,
        RegisterCapital: this.registerCapital
      }).then(res => {
        if (res.data.success) {
          let objectUrl = res.data.data
          console.log(objectUrl)
          const link = document.createElement('a')
          link.download = ''
          link.href = objectUrl
          link.click()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    tableSelectChange (val) {
      console.log(val)
      this.ids = val.map(item => {
        return item.id
      })
      console.log(this.ids)
    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    },

    // 是否操作认证前询问
    isSureModal (id) {
      this.$Modal.confirm({
        title: '是否确认操作',
        onOk: () => {
          console.log('确认操作 ', id)
          this.deleteCustomer(id)
        }
      })
    },

    deleteCustomer (id) {
      HRDCCustomerApi.DeleteCustomer({id: id}).then(res => {
        this.loading = false
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList()
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 分配客户-打开弹窗
    handleShowAllocationModal (row) {
      this.$refs.AllocationModal.show(row)
    },

    // 流入公海时间改变
    timeChange (event) {
      console.log('流入公海时间改变 event: ', event)
      this.liurushijian = event
    }
  }
}
</script>

<style lang="less">
  
</style>
